<template>
    <div class="login_container">
        <el-row>
            <el-col :span="12" :xs="0"></el-col>
            <el-col :span="12" :xs="24">
                <el-form class="login_form" :model="loginForm"  :rules="rules" ref="loginForms">
                    <h1>hello</h1>
                    <h2>欢迎来到硅谷甄选</h2>
                    <el-form-item prop="username">
                        <el-input :prefix-icon="User" v-model="loginForm.username"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" :prefix-icon="Lock" v-model="loginForm.password" show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="default" class="login_btn" @click="login" :loading="loading">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts" setup name="Login">
    import {User,Lock} from '@element-plus/icons-vue'
    import {reactive,ref} from 'vue'
    // 引入用户相关的小仓库
    import useUserStore from '@/store/modules/user'
    // 引入router
    import {useRouter,useRoute} from 'vue-router'
    import {ElNotification} from 'element-plus'
    // 引入获取当前时间的函数
    import {getTime} from '@/utills/time'

    // 获取el-form组件
    let loginForms=ref()
    // 收集表单数据
    let loginForm=reactive({username:'admin',password:'111111'})
    let userStore=useUserStore()
    // 控制按钮加载效果
    let loading=ref(false)
    // 自定义校验规则方法
    function validatorUserName(rule: any, value: any, callback: any){
        // rule即为校验规则对象 
        // value即为表单元素文本内容
        // 如果符合条件，通过callback放行
        // 如果不符合条件，调用callback注入错误提示信息
        if(value.length>=5){
            callback()
        }else{
            callback(new Error('账号至少五位'))
        }
    }
    // 表单校验需要的配置对象
    let rules={
        // 规则对象属性：
        // required：代表这个字段务必要校验的
        // min：文本长度最少多少位
        // max：文本长度最多多少位
        // message：错误的提示信息
        // trigger：触发的时机 change-文本发生变化触发校验，blur-失去焦点时触发校验
        username:[
            // {required:true,message:'用户名不能为空',trigger:'blur'},
            // {required:true,min: 5, max: 18, message: '账号长度至少六位', trigger: 'change'}
            // 自定义校验规则
            {trigger:'change',validator:validatorUserName}
        ],
        password:[
            {required:true,min:6,max:15,message:'密码至少6位',trigger:'change'}
        ]
    }
    // 获取路由器
    let $router=useRouter()
    // 获取路由信息
    let $route=useRoute()

    // 登录按钮回调
    async function login(){
        // 保证全部表单校验通过再发请求
        await loginForms.value.validate();
        // 加载效果：开始加载
        loading.value=true
        // 通知仓库发送登录请求
        try{
            // 保证登录成功
            await userStore.userLogin(loginForm)
            // 编程式导航跳转到首页
            // 如果路由路径当中有query参数，就跳转到query参数；否则跳转到首页
            let redirect:any=$route.query.redirect
            $router.push({path:redirect||'/'})
            // 登录成功的提示信息
            ElNotification({
               type:'success',
               message:'欢迎回来',
               title:`Hi~${getTime()}好`
            })
            // 登录成功加载效果消失
            loading.value=false
        }catch(error){
            // 登录失败加载效果消失
            loading.value=false
            // 登陆失败的提示信息
            ElNotification({
               type:'error',
               message:(error as Error).message
            })
        }
        // 请求失败-> 弹出登录失败信息
    }
</script>

<style scoped lang="scss">
    .login_container{
        width:100%;
        // vh就是当前屏幕可见高度
        height:100vh;
        background: url('@/assets/images/background.jpg') no-repeat;
        // 把背景图片宽高比例不变 扩展至足够大，直至完全覆盖背景区域
        background-size: cover;
    }

    .login_form{
        position: relative;
        width: 80%;
        top: 30vh;
        background: url('@/assets/images/login_form.png') no-repeat;
        background-size: cover;
        padding: 40px;
    }

    h1{
        color: white;
        font-size: 40px;
    }

    h2{
        font-size: 20px;
        color:white;
        margin: 20px 0;
    }

    .login_btn{
        width: 100%;
    }
</style>